<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>AddEmployee</title>
</head>
<body>
<form name="form1" method="post" action="">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Personal Information</a></li>
      <li><a href="#tabs-2">Education</a></li>
      <li><a href="#tabs-3">Previous Employment</a></li>
    </ul>
    <div id="tabs-1">
      <table align="center">
        <tr>
          <td class="side_label_middle">First Name : </td>
          <td colspan="3"><input type="text" name="fname" id="fname"></td>
        </tr>
        <tr>
          <td class="side_label_middle">Last Name : </td>
          <td colspan="3"><input type="text" name="lname" id="lname"></td>
        </tr>
        <tr>
          <td class="side_label_middle">Birthdate :</td>
          <td colspan="3"><input type="text" name="birthdate" id="birthdate" class="caldr"></td>
        </tr>
        <tr>
          <td class="side_label_top">Address : </td>
          <td><textarea name="address" id="address"></textarea></td>
          <td class="side_label_top">Alt address : </td>
          <td><textarea name="altaddress" id="altaddress"></textarea></td>
        </tr>
        <tr>
          <td class="side_label_middle">Apartment / Unit : </td>
          <td><input type="text" name="apartment" id="apartment"></td>
          <td class="side_label_middle">Alt apartment : </td>
          <td><input type="text" name="altapartment" id="altapartment"></td>
        </tr>
        <tr>
          <td class="side_label_middle">City :</td>
          <td colspan="3"><select name="city" id="city">
            </select>
          </td>
        </tr>
        <tr>
          <td class="side_label_middle">State :</td>
          <td colspan="3"><select name="state" id="state">
            </select></td>
        </tr>
        <tr>
          <td class="side_label_middle">Zip Code : </td>
          <td colspan="3"><input type="text" name="zipcode" id="zipcode"></td>
        </tr>
        <tr>
          <td class="side_label_middle">Phone : </td>
          <td><input type="text" name="phone" id="phone"></td>
          <td class="side_label_middle">alt phone :</td>
          <td><input type="text" name="altphone" id="altphone"></td>
        </tr>
        <tr>
          <td class="side_label_middle">Mobile :</td>
          <td><input type="text" name="mobile" id="mobile"></td>
          <td class="side_label_middle">alt mobile : </td>
          <td><input type="text" name="altmobile" id="altmobile"></td>
        </tr>
        <tr>
          <td class="side_label_middle">date available : </td>
          <td colspan="3"><input type="text" name="dateAva" id="dateAva"  class="caldr">
          </td>
        </tr>
        <tr>
          <td class="side_label_middle">id no.:</td>
          <td><input type="text" name="IDNO" id="IDNO"></td>
          <td class="side_label_middle">nationality : </td>
          <td><select name="nationality" id="nationality">
            </select></td>
        </tr>
        <tr>
          <td class="side_label_middle">desired salary : </td>
          <td colspan="3"><input type="text" name="salary" id="salary">
            EGP </td>
        </tr>
        <tr>
          <td colspan="4">position applied for : </td>
        </tr>
        <tr>
          <td valign="top" class="side_label_middle">Are you citizen of ARE : </td>
          <td colspan="3"><table>
              <tr>
                <td><input type="radio" name="radio" id="radio" value="radio"></td>
                <td>Yes </td>
                <td><input type="radio" name="radio2" id="radio2" value="radio2"></td>
                <td>No</td>
              </tr>
            </table></td>
        </tr>
        <tbody>
          <tr>
            <td valign="top" class="side_label_middle">Are you authoriezed to work in the ARE : </td>
            <td colspan="3"><table>
                <tr>
                  <td class="side_label_middle"><input type="radio" name="radio3" id="radio3" value="radio3"></td>
                  <td>Yes</td>
                  <td><input type="radio" name="radio4" id="radio4" value="radio4"></td>
                  <td>No</td>
                </tr>
              </table></td>
          </tr>
        </tbody>
        <tr>
          <td class="side_label_middle">Have you worked for this company :</td>
          <td colspan="3"><table>
              <tr>
                <td><input type="radio" name="radio" id="radio5" value="radio"></td>
                <td>Yes</td>
                <td><input type="radio" name="radio2" id="radio6" value="radio2"></td>
                <td>No</td>
              </tr>
            </table></td>
        </tr>
        <tbody>
          <tr>
            <td class="side_label_middle">When : </td>
            <td colspan="3"><input type="text" name="when" id="when"  class="caldr"></td>
          </tr>
        </tbody>
        <tr>
          <td class="side_label_middle">Have you ever been convicted of afelony : </td>
          <td colspan="3"><table>
              <tr>
                <td><input type="radio" name="radio" id="radio9" value="radio"></td>
                <td>Yes</td>
                <td><input type="radio" name="radio2" id="radio10" value="radio2"></td>
                <td>No</td>
              </tr>
            </table></td>
        </tr>
        <tbody>
          <tr>
            <td class="side_label_middle">Explain :</td>
            <td colspan="3"><input type="text" name="textfield3" id="textfield3"></td>
          </tr>
        </tbody>
        <tr>
          <td class="side_label_middle">Are you suffer from chronic diseases :</td>
          <td colspan="3"><table>
              <tr>
                <td><input type="radio" name="radio" id="radio13" value="radio"></td>
                <td>Yes</td>
                <td><input type="radio" name="radio2" id="radio14" value="radio2"></td>
                <td>No</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td class="side_label_middle">List :</td>
          <td colspan="3"><textarea name="textarea3" id="textarea3"></textarea></td>
        </tr>
        <tr></tr>
      </table>
    </div>
    <div id="tabs-2">
      <table align="center">
        <tr>
          <td colspan="4"  class="details_container">High school <br/>
            <table id="high_school">
            </table>
        </tr>
        <tr>
          <td colspan="4">&nbsp;</td>
        </tr>
        <tr>
          <td  class="side_label_middle">Post Graduate Studies : </td>
          <td><input type="text" name="textfield8" id="textfield8"></td>
          <td class="side_label_middle">Graduate :</td>
          <td><input type="checkbox" name="checkbox2" id="checkbox2"></td>
        </tr>
        <tr>
          <td colspan="4">Languages <br/>
            <table id="languages">
            </table></td>
        </tr>
        <tr>
          <td colspan="4">&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">Computers and Software Qualifications:</td>
          <td colspan="3"><textarea name="textarea5" id="textarea5"></textarea></td>
        </tr>
        <tr>
          <td colspan="4" valign="top">References <br/>
            <table id ="references">
            </table></td>
        </tr>
      </table>
    </div>
    <div id="tabs-3">
      <table align="center">
        <tr>
          <td  class="side_label_middle">Company : </td>
          <td colspan="3"><input type="text" name="textfield13" id="textfield13"></td>
        </tr>
        <tr>
          <td  class="side_label_middle">Phone :</td>
          <td colspan="3"><input type="text" name="textfield14" id="textfield14"></td>
        </tr>
        <tr>
          <td  class="side_label_middle">Address : </td>
          <td colspan="3"><textarea name="textarea" id="textarea"></textarea></td>
        </tr>
        <tr>
          <td  class="side_label_middle">Supervisor :</td>
          <td colspan="3"><input type="text" name="textfield" id="textfield"></td>
        </tr>
        <tr>
          <td  class="side_label_middle">Job Title : </td>
          <td colspan="3"><input type="text" name="textfield2" id="textfield2"></td>
        </tr>
        <tr>
          <td  class="side_label_middle">Starting Salary : </td>
          <td colspan="3" ><input type="text" name="textfield4" id="textfield4">
            EGP</td>
        </tr>
        <tr>
          <td  class="side_label_middle">Ending Salary : </td>
          <td colspan="3"><input type="text" name="textfield5" id="textfield5">
            EGP</td>
        </tr>
        <tr>
          <td colspan="4"  class="side_label_middle">Responsipilities :</td>
        </tr>
        <tr>
          <td  class="side_label_middle">From : </td>
          <td><input type="text" name="textfield6" id="textfield6"></td>
          <td  class="side_label_middle">To : </td>
          <td><input type="text" name="textfield7" id="textfield7"></td>
        </tr>
        <tr>
          <td  class="side_label_middle">Reason of Leaving : </td>
          <td colspan="3"><textarea name="textarea2" id="textarea2"></textarea></td>
        </tr>
        <tr>
          <td colspan="4"  class="side_label_middle">May we contact your previous supervisor for reference :
            <table>
              <tr>
                <td><input type="radio" name="radio7" id="radio7" value="radio7"></td>
                <td>yes</td>
                <td><input type="radio" name="radio8" id="radio8" value="radio8"></td>
                <td>no</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td colspan="4">Employment History
            <table id="emp_history">
            </table></td>
        </tr>
      </table>
    </div>
  </div>
  <script>
$(function(){
  // Initialize appendGrid
        $('#high_school').appendGrid({
            caption: null,
            initRows: 1,
            i18n: {rowEmpty: 'no high school'},
            columns: [
				{ name: 'name', display: 'Name', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'address', display: 'Address', type: 'text',  ctrlAttr: { maxlength: 100 },ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'from', display: 'From', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'to', display: 'To',  type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'graduate', display: 'Graduate', type: 'checkbox', ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'degree', display: 'Degree',  type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'recordId', type: 'hidden', value: 0 }
			]
        }); 
		
		
		<%
		StringBuffer langListStr = new StringBuffer();
		langListStr.append(" 1 : 'Ar' , "); 
		langListStr.append(" 2 : 'En' , "); 
		langListStr.append(" 3 : 'Fr' "); 

		StringBuffer speakListStr = new StringBuffer();
		speakListStr.append(" 1 : 'Fluent' "); 

		StringBuffer readListStr = new StringBuffer();
		readListStr.append(" 1 : 'Fluent' "); 

		StringBuffer writeListStr = new StringBuffer();
		writeListStr.append(" 1 : 'Fluent' "); 

		%>
		
		 $('#languages').appendGrid({
            caption: null,
            initRows: 1,
            i18n: {rowEmpty: 'no high school'},
            columns: [
				{ name: 'lang', display: 'Lang', type: 'select', ctrlOptions: {<%=langListStr.toString()%>}, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'speak', display: 'Speak',  type: 'select',ctrlOptions: {<%=speakListStr.toString()%>}, ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'read', display: 'Read', type: 'select',ctrlOptions: {<%=readListStr.toString()%>}, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'write', display: 'Write',  type: 'select', ctrlOptions: {<%=writeListStr.toString()%>}, ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'recordId', type: 'hidden', value: 0 }
			]
        }); 
		
		
		
		   $('#references').appendGrid({
            caption: null,
            initRows: 1,
            i18n: {rowEmpty: 'no high school'},
            columns: [
				{ name: 'fullName', display: 'Full Name', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'relationship', display: 'Relationship', type: 'text',  ctrlAttr: { maxlength: 100 },ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'company', display: 'company', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'phone', display: 'Phone',  type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'address', display: 'Address',  type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'recordId', type: 'hidden', value: 0 }
			]
        }); 
		
		$('#emp_history').appendGrid({
            caption: null,
            initRows: 1,
            i18n: {rowEmpty: 'no high school'},
            columns: [
				{ name: 'company', display: 'Company', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'jobTitle', display: 'Job Title', type: 'text',  ctrlAttr: { maxlength: 100 },ctrlCss: { display:'block', margin: 'auto', 'font-size':'.9em'} },
				{ name: 'responsibility', display: 'Responsibility', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { display:'block', margin:'auto', 'font-size':'.9em'} },
				{ name: 'recordId', type: 'hidden', value: 0 }
			]
        }); 
		
		
		$( "#tabs" ).tabs({active : 0},{ hide: { effect: "blind", duration: 800 } } ,{ show: { effect: "blind", duration: 800 } } );

});
</script>
</form>
</body>
</html>
